<script setup lang="ts">
import { PropType, watch, ref, reactive } from 'vue'
import { Form } from '@/components/Form'
// import { menuTreeApi } from '@/api/menu'
import { useForm } from '@/hooks/web/useForm'
import { required } from '@/utils/formRules'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const props = defineProps({
  formData: {
    type: Object as PropType<Nullable<any>>,
    default: () => null
  },
  meunData: {
    type: Array as PropType<any>,
    default: () => []
  }
})
const defaultProps = {
  children: 'children',
  label: 'menu_name'
}
const newMenuData = ref<any[]>([])

const schema = reactive<FormSchema[]>([
  {
    field: 'parent_id',
    label: t('上级菜单'),
    component: 'TreeSelect',
    componentProps: {
      data: newMenuData,
      'node-key': 'menu_id',
      'check-strictly': true,
      'default-expand-all': true,
      props: defaultProps
    }
  },
  {
    field: 'menu_name',
    label: t('菜单名称'),
    component: 'Input',
    formItemProps: {
      rules: [required]
    }
  },
  {
    field: 'menu_code',
    label: t('菜单代码'),
    component: 'Input',
    formItemProps: {
      rules: [required]
    }
  },
  {
    field: 'path',
    label: t('路径'),
    component: 'Input'
  },
  {
    field: 'component',
    label: t('组件'),
    component: 'Input'
  },
  {
    field: 'redirect',
    label: t('重定向'),
    component: 'Input'
  },
  {
    field: 'hidden',
    label: t('是否隐藏'),
    component: 'Select',
    componentProps: {
      options: [
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        }
      ]
    }
  },
  {
    field: 'alwaysShow',
    label: t('一直显示根路由'),
    component: 'Select',
    componentProps: {
      options: [
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        }
      ]
    }
  },
  {
    field: 'icon',
    label: t('图标'),
    component: 'Input'
  },
  {
    field: 'noCache',
    label: t('不缓存'),
    component: 'Select',
    componentProps: {
      options: [
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        }
      ]
    }
  },
  {
    field: 'breadcrumb',
    label: t('在面包屑中显示'),
    component: 'Select',
    componentProps: {
      options: [
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        }
      ]
    }
  },
  {
    field: 'affix',
    label: t('一直固定在tag项中'),
    component: 'Select',
    componentProps: {
      options: [
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        }
      ]
    }
  },
  {
    field: 'noTagsView',
    label: t('不会出现在tag中'),
    component: 'Select',
    componentProps: {
      options: [
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        }
      ]
    }
  },
  {
    field: 'activeMenu',
    label: t('显示高亮的路由路径'),
    component: 'Input'
  },
  {
    field: 'followAuth',
    label: t('跟随哪个路由进行权限过滤'),
    component: 'Input'
  },
  {
    field: 'canTo',
    label: t('依然路由跳转'),
    component: 'Select',
    componentProps: {
      options: [
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        }
      ]
    }
  },
  {
    field: 'disp_order',
    label: t('显示顺序'),
    component: 'InputNumber',
    componentProps: {
      min: 0
    }
  }
])

const { register, methods, elFormRef } = useForm({
  schema
})

watch(
  () => props.formData,
  (value) => {
    if (!value) return
    const { setValues } = methods
    setValues(value)
  },
  {
    deep: true,
    immediate: true
  }
)

watch(
  () => props.meunData,
  (value) => {
    if (!value) return
    newMenuData.value = [{ menu_id: '0', menu_name: ' ' }, ...value]
  },
  {
    deep: true,
    immediate: true
  }
)

defineExpose({
  elFormRef,
  getFormData: methods.getFormData,
  oldFormData: props.formData
})
</script>

<template>
  <div>
    <Form @register="register" />
  </div>
</template>
